<%@ page language="java" import="java.util.*,com.chj.entity.*"  pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人中心</title>
<link href="css/bootstrap.min.css"rel="stylesheet" type="text/css">
<link href="css/evtcar.css" rel="stylesheet" type="text/css" />
<link href="css/person/userInf.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/person/register.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/login.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script src="js/staticinfo.js"></script>
</head>
<body>
<!--顶部导航栏开始 -->
<%@include file="head.jsp" %>
<!--下面是中部导航栏的代码-->
<div class="nav-green nav-head" id="J_m_nav">
    <div class="nav-content">
        <div class="nav-btn "><a href="index.do">首页</a></div>
        <div class="nav-btn"><a href="ecarcharge/we_need_charge.do">我要充电</a></div>
        <div class="nav-btn active"><a href="person/person_center.do">个人中心</a></div>
        <div class="nav-btn"><a href="about_me.do">关于我们</a></div>
        <div class="nav-btn"><a href="person/person_help.do">用户帮助</a></div>
    </div>
</div>
</header>
<!--顶部导航栏结束 -->
<!--顶部导航栏结束 -->
        <div class="main">
            <div class="newcontainer">
<div id="user-card">
                    <div class="inners clearfix without-side">
                        <div class="head-line"><div class="name"><%=user.getUserName() %></div></div>
                        <div class="user-inf">
                            <ul class="introduction">
                                <li><i class="fa fa-phone-square" style="font-size: 20px;"></i><%=user.getUserPhone() %></li><br/>
                                <li><i class="fa fa-file-text"  style="font-size: 20px;"></i><%=user.getUserEmail()%></li>
                            </ul>
                        </div>
                        <div class="bindings"> 
                            <div class="fast-item">
                                <a href="person/person_msg.do" class="btn">
                                        <div class="img"><i class="fa fa-calendar fa-3x"></i></div>消息提醒
                                </a>
                                <a href="person/person_order_manager.do" class="btn">
                                        <div class="img">   <i class="fa fa-shopping-cart fa-3x"></i></div>订单管理
                                </a>
                                <a href="person/person_ecar.do" class="btn">
                                        <div class="img"><i class="fa fa-desktop fa-3x"></i></div>我的电动汽车                                    </a>
                                </a>
                                <a href="person/person_update.do" class="btn without-side">
                                        <div class="img"><i class="fa fa-info-circle fa-3x"></i></div>我的资料
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 更新个人资料主体部分 start-->
        <div class="container" style="margin-top: 10px;margin-bottom: 20px;margin-left: auto;margin-right: auto;">
          
            <div class="register_box head" style="background: -webkit-linear-gradient(#fff,#f2f2f2); margin-bottom: 0px;">
                    <h3 id="h" style="padding-left: 18px; margin-top: 15px;">修改信息</h3>
            </div>
            
            <div style="float:left;width:20%; background: #f7f7f7; height:500px">
                <ul>
                    <li id="la" style="height: 39px; font-size: 20px; padding-left: 70px; background-color: rgb(255, 255, 255);"><a id="a">基本资料</a></li>
                    <li style="  border-top: solid 1px #dde3e9;"></li>
                    <li id="lb" style="height: 39px; font-size: 20px; padding-left: 70px; background-color: rgb(247, 247, 247);"><a id="b">修改密码</a></li>
                    <li style="  border-top: solid 1px #dde3e9;"></li>
                </ul>
            </div>
            <div name="fname" style="float:right;width:80%;height:500px">
            <div class="register_box" style="width:100%;height:500px;padding-left: 18px;">
                
                <div id="form1" style="margin-top: 10px; display: block;">
                    <div><h3 style="padding-bottom: 11px;font-size:22px;padding-left: 18px;color: #999;border-bottom: solid 2px #f2f2f2;">基本信息</h3></div>
                    
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tbody>
                                            <tr>
                                                <td class="t"><span>*</span>昵称：</td>
                                                <td><input type="text" id="usname" value="" autocomplete="off"></td>
                                                <td><span id="div1" style="display: none;" class="cue"></span></td>
                                            </tr>
                                            <tr>
                                                <td class="t"><span>*</span>邮箱：</td>
                                                <td><input type="text" id="usemail" value="" autocomplete="off"></td>
                                                <td><span id="div2" style="display: none;" class="cue"></span></td>
                                            </tr>
                                            <tr>
                                                <td class="t"><span>*</span>手机：</td>
                                                <td><input type="text" id="usphone" value="" autocomplete="off"></td>
                                                <td><span id="div3" style="display: none;" class="cue"></span></td>
                                            </tr>
                                            <tr>
                                                <td class="t">
                                                    &nbsp;
                                                </td>
                                                <td>
                                                    <input type="submit" id="saveusinf" style="background: -webkit-linear-gradient(#75abda,#6698c9);width: 68px;  height: 34px;color: #fff;" value="保存信息">
                                                </td>
                                            </tr>
                                        </tbody>
                           </table>
                    
                </div>
                <div id="form2" style="display: none;">
                    <div><h3 style="padding-bottom: 11px;font-size:22px;padding-left: 18px;color: #999;border-bottom: solid 2px #f2f2f2;">修改密码</h3></div>
                    
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tbody>
                                            <tr>
                                                <td class="t">新登录密码：</td>
                                                <td><input type="password" id="uspassword1" value="" autocomplete="off"></td>
                                            </tr>
                                            <tr>
                                                <td class="t">确认新密码：</td>
                                                <td><input type="password" id="uspassword2" value="" autocomplete="off"></td><td><div id="alertinf" style="color:red;"></div></td>
                                            </tr>
                                            <tr>
                                                <td class="t">
                                                    &nbsp;
                                                </td>
                                                <td>
                                                    <input type="submit" id="changepassword" style="background: -webkit-linear-gradient(#75abda,#6698c9);width: 68px;  height: 34px;color: #fff;" value="修改密码">
                                            </tr>
                            </tbody>
                        </table>
            </div>
        </div>
        </div>
      
    </div>
    <!-- 更新个人资料主体部分 end-->
  <%@include file="footer.jsp" %>
</form>


</body>
</script>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">

    //基本资料显示事件
    $("#la").click(function (e) {
        $("#la").css("background-color","#fff");
        $("#lb").css("background-color","#f7f7f7");
        $("#form2").hide();
        $("#form1").show();
    });
    //修改密码显示事件
    $("#lb").click(function (e) {
        $("#lb").css("background-color","#fff");
        $("#la").css("background-color","#f7f7f7");
        $("#form1").hide();
        $("#form2").show();
    });

    //加载事件，form2隐藏
    $(function(){
        $("#form2").hide();
    });

    //保存信息事件
    $("#saveusinf").click(function (e) {
        
               if (checkname()){
            	   return;
               }
               if (checkemail()){
            	   return;
               }
               if (checkPhoneNum()) {
            	   return;
               }

            //usname,usemail,usphone,uscity,usnotes
            var usname = $("#usname").val();
            var usemail = $("#usemail").val();
            var usphone = $("#usphone").val();

            
            var url = "person/person_update_user.do"
            //alert(AjaxURL);
            var a=confirm("确认提交修改");
            if(a==true){
                $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: url,
                            data:{
                               userName:usname,
                               userPhone:usphone,
                               userEmail:usemail
                            },
                            success: function (data) {
                                alert("修改用户信息成功！");
                                $("#usname").val("");
					            $("#usemail").val("");
					            $("#usphone").val("");
					            window.location.href = 'person/person_update.do'
                            },
                            error: function(data) {
                                alert("error!");
                             }
                        }); 
            }
        });

    
//检查用户名
function checkname(){
                var div = $("#div1");
                var name1 = $("#usname").val();
               
                if (name1 == "") {
                    div.html("用户名不能为空！").show();
                    return true;
                }
                if (name1.length<4) {
                    div.html("用户名不能为小于4位").show();
                    return true;
                }
                if (name1.length>16) {
                    div.html("请输入长度为16字以内的用户名！").show();
                    return true;
                }

                div.hide();
                $("#usname").css("borderColor","green");
                return false;
}

//检查邮箱
function checkemail(){

            var div = $("#div2");
            var email = $("#usemail").val();

            if (email == "") {
                div.html("邮箱不能为空").show();
                return true;
            }
            if (!/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(email)) 
            {
                div.html("输入的邮箱格式不正确！").show();
                return true;
            }
            div.hide();
            $("#usemail").css("borderColor","green");
            return false;
}

//检查手机号
 function checkPhoneNum(){
                var div = $("#div3");
                 var name1 = $("#usphone").val();
               
                if (name1 == "") {
                    div.html("电话不能为空！").show();
                    return true;
                }else if (name1.length != 11) {
                    div.html("请输入11位手机号码").show();
                    return true;
                }
                for (var i = 0; i < name1.length; i++) {
                    var charname = name1.charAt(i);
                    if (!(charname >= 0 && charname <= 9)) {
                        div.html("请输入数字").show();
                        return true;
                    }
                }
                div.hide();
                $("#usphone").css("borderColor","green");
                return false;
}
    
         //密码框2移动开的时候，触发事件
        $("#uspassword2").blur(function(){

            passwordCheck();
        });

        //检查密码操作
        function passwordCheck(){
            var uspassword1 = $("#uspassword1").val();
            var uspassword2 = $("#uspassword2").val();

            if (uspassword1 == '') {
                $("#alertinf").html("<h6>请输入密码！</h6>");
                return false;
            } else if (uspassword2 == '') {
                $("#alertinf").html("<h6>请在一次输入密码！</h6>");
                return false;
            } else if(uspassword1!=uspassword2){
                $("#alertinf").html("<h6>两次输入的密码不同</h6>");
            } else if (uspassword1.length < 6 || uspassword1.length > 20) {
                $("#alertinf").html("<h6>密码长度必须大于6位小于20位</h6>");
                return false;
            } else {
                $("#alertinf").html("");
                return true;
            }
        }

        //修改密码主要操作
        $("#changepassword").click(function (e) {
            //uspassword1,uspassword2
            var uspassword1 = $("#uspassword1").val();
            var uspassword2 = $("#uspassword2").val();

            if(passwordCheck()){
                var url = "person/person_update_password.do";
                //alert(AjaxURL);
                var a=confirm("是否确认修改密码？");
                if(a==true){
                        $.ajax({
                                type: "POST",
                                dataType: "json",
                                url: url,
                                data: {
                                   userPassword:uspassword2
                                },
                                success: function (result) {

                                    if (result.flg == 'true'){
                                        alert('密码修改成功！');
                                        $("#uspassword1").val('');
                                        $("#uspassword2").val('');
                                    } else {
                                        alert(result.errorMsg);
                                    }
                                    
                                },
                                error: function(data) {
                                    alert("error!");
                                 }
                            });
                }
                $("#alertinf").html("");
            }else{
                alert('请检查密码输入是否符合要求！');
            }
        });

    </script>

</html>
